<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>动态</title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/dynamic.css" />
		<script src="js/jquery.min.js"></script>
	</head>
	<body style="background: #fff;">
		<!--nav 可复用-->
		<div class="nav">
			<p style="margin-left: calc((100% - 34px)/2);">动态</p>
		</div>
		<!--动态内容-->
		<div class="dynamic_content">
			<div class="dynamic_line1">
				<img src="images/个人动态_03.png" alt="" />
				<p>晴儿</p>
				<p>实名</p>
				<p>30分钟前</p>
				<div class="dymamic_spangroup">
					<span>
						<img src="images/动态_16.png"/>
						23岁
					</span>
					<span>163cm</span>
					<span>本科</span>
					<span>回族</span>
					<span>征婚</span>
				</div>
				<p>人生最大的敌人是自己，人生最大的失败是自大，人生最大的愚蠢是欺骗，人生最大的可怜是嫉妒。</p>
				<div class="dynamic_imgroup">
					<img src="images/动态_21.png" alt="" />
					<img src="images/动态_21.png" alt="" />
					<img src="images/动态_21.png" alt="" />
				</div>
				<p>
					<i><img src="images/动态_25.png" alt="" /></i>
					<span></span>
					<input type="hidden" id="allmap"/>
				</p>
				<div class="dynamic_icongroup">
					<div class="dynamic_icongroup_line1 xiala">
						<i><img src="images/动态_38.png" alt="" /></i>
					</div>
					<div class="dynamic_icongroup_line1 dialog">
						<i><img src="images/动态_35.png" alt="" /></i>
						<span></span>
					</div>
					<div class="dynamic_icongroup_line1 zan">
						<i><img src="images/动态_32.png" alt="" /></i>
						<span>20</span>
					</div>
					<div class="dynamic_icongroup_line1">
						<i><img src="images/动态_30.png" alt="" /></i>
						<span>赏</span>
					</div>
					<div class="dynamic_icongroup_line1 view">
						<i><img src="images/动态_28.png" alt="" /></i>
						<span>220</span>
					</div>
				</div>
				
				<div class="dynamic_dialog dynamic_dialog1">
					<div class="triangle-up"></div>
					<p>张三 &nbsp;: <span>你好</span></p>
					<p>晴儿&nbsp;<span>回复&nbsp;</span>张三&nbsp;: <span>你好</span></p>
					<p>李四&nbsp;<span>你有什么事吗？</span></p>
				</div>
			</div>
			<div class="dynamic_line1 dynamic_line2">
				<img src="images/个人动态_03.png" alt="" />
				<p>月儿</p>
				<p>实名</p>
				<p>30分钟前</p>
				<div class="dymamic_spangroup">
					<span>
						<img src="images/动态_16.png"/>
						23岁
					</span>
					<span>163cm</span>
					<span>本科</span>
					<span>回族</span>
					<span>征婚</span>
				</div>
				<p>人生最大的敌人是自己，人生最大的失败是自大，人生最大的愚蠢是欺骗，人生最大的可怜是嫉妒。</p>
				<div class="dynamic_imgroup">
					<img src="images/动态_21.png" alt="" />
					<img src="images/动态_21.png" alt="" />
					<img src="images/动态_21.png" alt="" />
				</div>
				<p>
					<i><img src="images/动态_25.png" alt="" /></i>
					<span>杭州</span>
				</p>
				<div class="dynamic_icongroup">
					<div class="dynamic_icongroup_line1 xiala">
						<i><img src="images/动态_38.png" alt="" /></i>
					</div>
					<div class="dynamic_icongroup_line1 dialog">
						<i><img src="images/动态_35.png" alt="" /></i>
						<span></span>
					</div>
					<div class="dynamic_icongroup_line1 zan">
						<i><img src="images/动态_32.png" alt="" /></i>
						<span>20</span>
					</div>
					<div class="dynamic_icongroup_line1">
						<i><img src="images/动态_30.png" alt="" /></i>
						<span>赏</span>
					</div>
					<div class="dynamic_icongroup_line1 view">
						<i><img src="images/动态_28.png" alt="" /></i>
						<span>220</span>
					</div>
				</div>
				
				<div class="dynamic_dialog dynamic_dialog2">
					<div class="triangle-up"></div>
					<p>张三 &nbsp;: <span>你好</span></p>
					<p>晴儿&nbsp;<span>回复&nbsp;</span>张三&nbsp;: <span>你好</span></p>
				</div>
			</div>
			<div class="dynamic_line1 dynamic_line3">
				<img src="images/个人动态_03.png" alt="" />
				<p>宝宝</p>
				<p>实名</p>
				<p>30分钟前</p>
				<div class="dymamic_spangroup">
					<span>
						<img src="images/动态_16.png"/>
						23岁
					</span>
					<span>163cm</span>
					<span>本科</span>
					<span>回族</span>
					<span>征婚</span>
				</div>
				<p>人生最大的敌人是自己，人生最大的失败是自大，人生最大的愚蠢是欺骗，人生最大的可怜是嫉妒。</p>
				<div class="dynamic_imgroup">
					<img src="images/动态_21.png" alt="" />
					<img src="images/动态_21.png" alt="" />
					<img src="images/动态_21.png" alt="" />
				</div>
				<p>
					<i><img src="images/动态_25.png" alt="" /></i>
					<span>杭州</span>
				</p>
				<div class="dynamic_icongroup">
					<div class="dynamic_icongroup_line1 xiala">
						<i><img src="images/动态_38.png" alt="" /></i>
					</div>
					<div class="dynamic_icongroup_line1 dialog">
						<i><img src="images/动态_35.png" alt="" /></i>
						<span></span>
					</div>
					<div class="dynamic_icongroup_line1 zan">
						<i><img src="images/动态_32.png" alt="" /></i>
						<span>20</span>
					</div>
					<div class="dynamic_icongroup_line1">
						<i><img src="images/动态_30.png" alt="" /></i>
						<span>赏</span>
					</div>
					<div class="dynamic_icongroup_line1 view">
						<i><img src="images/动态_28.png" alt="" /></i>
						<span>220</span>
					</div>
				</div>
				<div class="dynamic_dialog dynamic_dialog3">
					<div class="triangle-up"></div>
					<p>张三 &nbsp;: <span>你好</span></p>
					<p>晴儿&nbsp;<span>回复&nbsp;</span>张三&nbsp;: <span>你好</span></p>
				</div>
			</div>
		</div>
	
		<!--chat bottom-->
		<div class="chat_bottom">
			<!--<img src="images/聊天_20.png" alt="" />-->
			<input type="text" />
			<img src="images/聊天_23.png" alt="" />
			<img src="images/聊天_25.png" alt="" class="char"/>
			<button class="send">发送</button>
			<i></i>
		</div>
		<div class="dynamic_dialog2_1">
			<form action="">
				<div class="dynamic_dialog_line1">
					<p>拉黑</p>
					<p onclick="javascript:window.location.href='report.html'">举报</p>
				</div>
				<div class="dynamic_dialog_line2">
					<p class="cancel">取消</p>
				</div>
			</form>
		</div>
		<script>
			$(function(){
				$('.dynamic_btngroup button').click(function(){
					var o = $(this).index();
					if(o == 0){
						$('.dynamic_line1').show().next('.dynamic_line1').hide();
					}else if(o == 1){
						$('.dynamic_line2').show().siblings('.dynamic_line1').hide();
					}else if(o == 2){
						$('.dynamic_line3').show().prev('.dynamic_line1').hide();
					}
					$(this).addClass('active').siblings('button').removeClass('active');
				})
			})
			
			$(document)
			.ready(function(){
				var a = $('.dynamic_dialog1').children('p').length;
				var b = $('.dynamic_dialog2').children('p').length;
				var c = $('.dynamic_dialog3').children('p').length;
				$('.dynamic_dialog1').prev('.dynamic_icongroup').children('.dialog').find('span').text(a);
				$('.dynamic_dialog2').prev('.dynamic_icongroup').children('.dialog').find('span').text(b);
				$('.dynamic_dialog3').prev('.dynamic_icongroup').children('.dialog').find('span').text(c);
			})
			.on('click','.zan',function(){
				var h = $(this).find('span').text();
				$(this).find('span').text(parseInt(h)+1);
			})
			.on('click','.dialog',function(){
				$('.chat_bottom').show();
				$('.send').click(function(){
					var c = $('.chat_bottom').children('input').val();
					if(c ==''){
						return false;
					}
					$('.dynamic_dialog').append('<p>李四&nbsp;\:<span>'+c+'</span></p>');
					$('.chat_bottom').children('input').val('');
				})
			})
			.on('click','.dynamic_dialog p',function(){
				var z = $(this).index()-1;
				$('.chat_bottom').show();
				$('.send').click(function(){
					var e =$('.chat_bottom').children('input').val();
					$('.dynamic_dialog p:eq('+z+')').after('<p>李四&nbsp;\:<span>'+e+'</span></p>');
					$('.chat_bottom').children('input').val('');
				})
			})
			.on('keyup','.chat_bottom input',function(){
				$('.chat_bottom .char').hide().next('.send').show().next('i').hide();
			});
			
			$('.xiala').click(function(){
					$('.dynamic_dialog2_1').show();
				})
				$('.cancel').click(function(){
					$('.dynamic_dialog2_1').hide();
				})
				var dialog = document.querySelector('.dynamic_dialog2_1');
				var form = document.querySelector('.dynamic_dialog form');
				dialog.addEventListener('click',function(e){
					if(e.target.classList[0]=='dynamic_dialog2_1'){
						dialog.style.display='none';
					}
				})
		</script>
	</body>
</html>
